<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body style="margin:0px;background-color:#F4F4F4">
<script src="scripts/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
  /* EXAMPLE */
  DD_belatedPNG.fix('.HomeCategory .CateHeader, .HomeCategory .CateFooter,.HomeCategory .CateHeader .headerText');
  
  /* string argument can be any CSS selector */
  /* .png_bg example is unnecessary */
  /* change it to what suits you! */
</script>
<style>
/* ------------------------------------------------------------------------------------
RESET WILL UPDATE MORE			 */
abbr, acronym {border: 0 none; font-variant: normal;}
address, caption, cite, code, dfn, em, strong, th, var {font-style: normal; font-weight: 400;}
body {font-family: Arial; margin:0 auto;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, hr, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {margin: 0; padding: 0;}
caption, th {text-align: left;}
em {font-style: italic; font-weight: inherit;}
fieldset, img {border: 0 none; display: block; }
html {overflow-y: scroll;}
/*html {/*background: #f4f4f4 none repeat scroll 0 0;*/}*/
a, input[type="submit"], input[type="reset"], input[type="button"] {border: 0 none; cursor: pointer; outline-style: none;}
a { text-decoration: none; }
input, textarea, select {font-family: inherit; font-size: inherit; font-weight: inherit; outline-style: none; outline-width: 0;}
legend {color: #000000; display: none;}
li {list-style-image: none; list-style-position: outside; list-style-type: none;}
strong {font-style: inherit; font-weight: 700;}
sub {vertical-align: text-bottom;}
sup {vertical-align: text-top;}
table {border-collapse: collapse; border-spacing: 0;}
.clearthis{clear:both;}

/**/

</style>
<style>
	.HomeCategory{float:left;padding:0px;width:677px}
	.HomeCategory .CateHeader, .HomeCategory .CateFooter,.HomeCategory .CateHeader .headerText,.cateCont,.homeSkip{background-image:url(images/bgCategoryPart.png);background-repeat:no-repeat;}
	
	.HomeCategory .CateHeader, .HomeCategory .CateFooter{width:677px;height:12px;float:left}
	.HomeCategory .CateHeader{background-position:0px 0px}
	.HomeCategory .CateHeader .headerText{background-position:-3px -78px;position:relative;z-index:100;height:44px;width:374px;left:-8px;top:10px;color:#FFF;font-size:14px;padding:17px 0 0 10px;font-weight:bold}
	.HomeCategory .CateFooter{background-position:0px -41px}
	.HomeCategory .CateContent{float:left;width:677px;background-image:url(images/bgCategory.png);background-repeat:repeat-y;padding:50px 0 15px 0px;}
	.HomeCategory .CateContent ul{float:left;width:660px}
	.HomeCategory .CateContent ul li{float:left;width:165px;height:100px;text-align:center;display:inline}
	.HomeCategory .CateContent ul li p{text-align:center;font-size:12px;font-weight:bold;color:#666;padding-top:5px}
	.HomeCategory .CateContent ul li a{width:74px;height:74px;float:left;background-image:url(images/categoryBG.jpg);clear:both;margin-left:47px}
				.selected1{background-position:0px 0px !important;}
				a.Cate1{background-position:0px -148px;}
				a.Cate1:hover{background-position:0px 0px;}
				.selected2{background-position:-74px 0px !important;}
				a.Cate2{background-position:-74px -148px;}
				a.Cate2:hover{background-position:-74px 0px;}
				.selected3{background-position:-148px 0px!important;}
				a.Cate3{background-position:-148px -148px;}
				a.Cate3:hover{background-position:-148px 0px;}
				.selected4{background-position:-222px 0px!important;}
				a.Cate4{background-position:-222px -148px;}
				a.Cate4:hover{background-position:-222px 0px;}
				.selected5{background-position:0px -74px !important;}
				a.Cate5{background-position:0px -222px;}
				a.Cate5:hover{background-position:0px -74px;}
				.selected6{background-position:-74px -74px !important;}
				a.Cate6{background-position:-74px -222px;}
				a.Cate6:hover{background-position:-74px -74px;}
				.selected7{background-position:-148px -74px !important;}
				a.Cate7{background-position:-148px -222px;}
				a.Cate7:hover{background-position:-148px -74px;}
				.selected8{background-position:-222px -74px!important;}
				a.Cate8{background-position:-222px -222px;}
				a.Cate8:hover{background-position:-222px -74px;}
				
		.cateCont{background-position:-3px -147px;width:159px;height:43px;float:left;text-indent:-100000000px;}
		.cateContBound{padding-left:246px;float:left;padding-top:20px}
		a.cateCont:hover{background-position:-169px -147px}
		.homeSkip{width:169px;height:26px;background-position:0px -205px;float:right;position:relative;z-index:0;right:10px;top:-87px;}
		a.homeSkip:hover{background-position:-174px -205px}
</style>
<div class="HomeCategory" style="margin-left:100px;margin-top:100px">
	<div class="CateHeader">
    	<div class="headerText">Bạn quan tâm đến điều gì trong cuộc sống?</div>
        <a class="homeSkip" href="#"></a>
    </div>
   
    <div class="CateContent">
    	<ul>
        	<li>
            	<a href="#" class="Cate1 selected1"></a>
               <div class="clearthis"></div>
                <p>TÀI CHÍNH</p>
            </li>
            
            <li>
            	<a href="#" class="Cate2"></a>
               <div class="clearthis"></div>
                <p>CÔNG VIỆC</p>
            </li>
            <li>
            	<a href="#" class="Cate3"></a>
               <div class="clearthis"></div>
                <p>SỨC KHỎE</p>
            </li>
            <li>
            	<a href="#" class="Cate4"></a>
               <div class="clearthis"></div>
                <p>DU LỊCH</p>
            </li>
            <div class="clearthis"></div>
            
            <li>
            	<a href="#" class="Cate5"></a>
               <div class="clearthis"></div>
                <p>SÁNG TẠO</p>
            </li>
            <li>
            	<a href="#" class="Cate6"></a>
               <div class="clearthis"></div>
                <p>GIẢI TRÍ</p>
            </li>
            <li>
            	<a href="#" class="Cate7"></a>
               <div class="clearthis"></div>
                <p>HỌC TẬP</p>
            </li>
            <li>
            	<a href="#" class="Cate8"></a>
               <div class="clearthis"></div>
                <p>TÌNH YÊU</p>
            </li>
            
                       
        </ul>
        <div class="cateContBound">
        <a href="#" class="cateCont">Tiếp tục</a>
        </div>
    </div>
   
    <div class="CateFooter">
    </div>
</div>

</body>
</html>
